<template>
  <div id="user">
    <div class="back">
      <div class="back-content" @click="$router.back()">
        <a-icon type="left" />
        <span>返回</span>
      </div>
    </div>

    <div class="user-wrap">
      <a-card title="我的技能">
        <a slot="extra" href="#">
          <a-button type="dashed" @click="addDomain"> <a-icon type="plus" /> 添加技能 </a-button>
        </a>
        <a-form-model :model="skillForm" class="form-model">
          <a-form-model-item
            v-for="(domain, index) in skillForm.domains"
            :key="domain.key"
            v-bind="index === 0 ? formItemLayout : {}"
            label="技能"
            :prop="'domains.' + index + '.value'"
            :rules="{
              required: true,
              message: '技能不能为空',
              trigger: 'blur'
            }"
          >
            <div>
              <a-input v-model="domain.value" placeholder="请输入您会的技能" style="margin-right: 8px" />
            </div>
            <div style="margin-top: 10px">
              <a-input v-model="domain.skillDes" placeholder="请输入您会的技能" style="width: 50%; margin-right: 8px" />
              <a-button type="primary" shape="circle" @click="onAddSkillDes(index)"> + </a-button>
              <div>
                <a-tag v-for="(_item, _index) in domain.skuInfo" :key="_item" closable @close="onDeleteSkillDes(index, _index)" color="#108ee9">
                  {{ _item }}
                </a-tag>
              </div>
            </div>
            <div style="display: flex; align-items: flex-end">
              <a-button type="primary" style="margin-top: 10px; flex: 1; margin-right: 10px" @click="addSkillAll(index)">
                <span>创建 / 更新</span>
              </a-button>
              <a-popconfirm title="您是否要删除？" ok-text="Yes" cancel-text="No" @confirm="onSwitchSkill(index)" v-if="domain.hidden">
                <a-button v-if="domain.hidden == '0'"> 删除 </a-button>
                <a-button v-if="domain.hidden == '1'"> 恢复 </a-button>
              </a-popconfirm>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      span: 6, //左右两边的span
      skillForm: {
        domains: [] //技能表
      }
    }
  },

  created() {
    this.getSkill()
    // this.addDomain()
  },

  methods: {
    // 获取技能
    getSkill() {
      this.$api.getSkill({ type: 'all' }).then((res) => {
        if (res.code === 1) {
          this.skillForm.domains = res.data.map((item) => ({
            id: item.id,
            createTime: item.create_time,
            value: item.skill_detail,
            skuInfo: item.skill_intro,
            key: item.create_time,
            hidden: item.hidden
          }))
        }
      })
    },

    // 添加skill
    addDomain() {
      this.skillForm.domains.push({
        value: '',
        key: Date.now()
      })
    },

    // 添加skill简介
    onAddSkillDes(index) {
      let domain = this.skillForm.domains[index]
      if (!domain.skuInfo) {
        this.$set(domain, 'skuInfo', [])
      }

      if (!domain.skillDes) {
        return this.$message.error('技能缩写不能为空')
      }

      if (domain.skuInfo.indexOf(domain.skillDes) === -1) {
        domain.skuInfo.push(domain.skillDes)
      } else {
        this.$message.error('技能缩写已存在')
      }
      domain.skillDes = ''
    },

    // 删除skill简介
    onDeleteSkillDes(index, _index) {
      let domain = this.skillForm.domains[index]
      domain.skuInfo.splice(_index, 1)
    },

    // 添加技能
    addSkillAll(index) {
      let domain = this.skillForm.domains[index]
      let data = {
        skill_detail: domain.value,
        skill_intro: domain.skuInfo
      }
      if (domain.id) {
        data.type = 'update'
        data.id = domain.id
      }
      this.$api.setSkill(data).then((res) => {
        if (res.code === 1) {
          this.$message.success(res.message)
          this.getSkill()
        }
      })
    },

    onSwitchSkill(index) {
      let domain = this.skillForm.domains[index]

      this.$api.switchSkill(domain.id).then((res) => {
        if (res.code === 1) {
          domain.hidden = domain.hidden === '0' ? '1' : '0'
          this.$message.success(res.message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#user {
  .user-wrap {
    .form-model {
      display: flex;
      flex-wrap: wrap;
    }
    .ant-form-item {
      box-shadow: 0 0 5px #ccc;
      padding: 15px;
      width: 30%;
      border-radius: 5px;
      margin-left: 20px;
    }
    @media screen and (max-width: 1300px) {
      .ant-form-item {
        box-shadow: 0 0 5px #ccc;
        padding: 15px;
        width: 45%;
        border-radius: 5px;
        margin-left: 20px;
      }
    }

    .upload-avatar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .avatar-uploader {
      width: auto;
    }
  }
}
</style>